<template>
  <div class='me'>
    <!-- 头部 -->
    <header>
      <div class="header_content">
        <img v-if="userInfo.user_info" :src="userInfo.user_info.photo_url" alt="">
        <img v-if="!userInfo.user_info&&FileUrl.length>0" :src="FileUrl+'default.png'" alt="">
        <div v-if="userInfo.user_info" class="nick_name">
          <div class="name">{{userInfo.user_info.nickname}}</div>
          <div class="phone" v-if="userInfo.phone!=''">{{userInfo.phone}}</div>
          <button v-if="!userInfo.phone" class="phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">绑定手机号</button>

        </div>
        <div v-if="!userInfo.user_info" class="nick_name">
          <button class="login_btn" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">注册/登录</button>
          <!--          <button class="login_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">注册/登录</button>-->
        </div>
      </div>
      <!--      <div class="credit">-->
      <!--        <div>当前积分</div>-->
      <!--        <div><span>{{userInfo.user_info.integral}}</span>积分</div>-->
      <!--      </div>-->
    </header>
    <!-- 头部结束 -->

    <!-- 中间菜单栏 -->
    <div class="menu">
      <div class="menu_item cartIcon_wrapper" @click="toOrder('1')">
        <img src="../../../static/images/me/pay.png" alt="">
        <div>待付款</div>
        <div class="cartIcon1" v-if="orderList.Pending_payment!=0&&orderList.Pending_payment">{{orderList.Pending_payment}}</div>
      </div>
      <div class="menu_item cartIcon_wrapper" @click="toOrder('2')">
        <img src="../../../static/images/me/ship.png" alt="">
        <div>待发货</div>
        <div class="cartIcon1" v-if="orderList.to_be_delivered!=0&&orderList.to_be_delivered">{{orderList.to_be_delivered}}</div>
      </div>
      <div class="menu_item cartIcon_wrapper" @click="toOrder('3')">
        <img src="../../../static/images/me/recieve.png" alt="">
        <div>待收货</div>
        <div class="cartIcon1" v-if="orderList.Pending_receipt!=0&&orderList.Pending_receipt">{{orderList.Pending_receipt}}</div>
      </div>
      <div class="menu_item cartIcon_wrapper" @click="toOrder('')">
        <img src="../../../static/images/me/order.png" alt="">
        <div>全部订单</div>
      </div>
    </div>
    <!-- 中间菜单栏 -->

    <div class="list">
      <div class="list_item">
        <navigator url="/pages/address/main?type=address" >
          <span>收货地址</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
        </navigator>
      </div>
      <div class="list_item">
        <button open-type="contact">
          <span>联系客服</span>
          <span class="list_item_arrow">
            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">
          </span>
        </button>
      </div>
      <!--      <div class="list_item">-->
      <!--        <navigator url="/pages/cart/main"  open-type="switchTab" class="cartIcon_wrapper">-->
      <!--          <span>购物车</span>-->
      <!--          <span class="list_item_arrow">-->
      <!--            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">-->
      <!--          </span>-->
      <!--          <div class="cartIcon" v-if="cartListNum!=0">{{cartListNum}}</div>-->
      <!--        </navigator>-->
      <!--      </div>-->
      <!--      <div class="list_item">-->
      <!--        <navigator url="/pages/aboutUs/main">-->
      <!--          <span>关于我们</span>-->
      <!--          <span class="list_item_arrow">-->
      <!--            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">-->
      <!--          </span>-->
      <!--        </navigator>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script>
  export default{
    name:'me',
    data(){
      return {
        FileUrl: this.$base,
        userInfo:{
        },
        cartListNum:"",
        orderList:'',
        code: ''
      }
    },
    computed:{

    },
    onLoad(){

    },
    methods:{
      //获取微信绑定的手机号
      async getPhoneNumber (e) {
        console.log(e)
        var _this = this;
        wx.login({
          success: res =>{
            // 获取code
            let code = res.code;
            console.log(code);
            let params = {
              code: code,
              encryptedData: e.mp.detail.encryptedData,
              iv: e.mp.detail.iv,
              user_token:wx.getStorageSync('userToken')
            }
            _this.$request.postData('/auth/getWeChatPhone',params).then(res1=>{
              if(res1.data.level == 'success'){
                // _this.getUserInfo();
                console.log(res1.data.data);
                _this.directBindingPhone(res1.data.data);
              }else {
                _this.$currency.showToast(res1.data.message, 'none', 1500)
              }
            })
          }
        })

      },
      //绑定手机号
      async directBindingPhone (phone) {
        console.log('dd')
        let phones = JSON.parse(phone);
        console.log(phones)
        const res = await this.$request.postData('/auth/directBindingPhone',{
          phone : phones.phoneNumber,
          user_token:wx.getStorageSync('userToken')
        })
        if (res.data.level == 'success'){
          this.$currency.showToast(res.data.message, 'success', 1500)
          this.getUserInfo();
          this.getOrderList()
        }else {
          this.$currency.showToast(res.data.message, 'none', 1500)
        }
      },
      //微信授权
      async bindGetUserInfo(){
        var _this = this
        wx.login({
          success: res =>{
            let code = res.code;
            wx.getUserInfo({
              success: res =>{
                let params = {
                  raw_data:res.rawData,
                  signature:res.signature,
                  code:code
                }
                _this.$request.postData('/auth/wxAppLogin',params).then(res1 => {
                  if(res1.data.level == 'success'){
                    wx.setStorageSync('userToken', res1.data.data);
                    _this.getUserInfo();
                    _this.getOrderList()
                  }else {
                    _this.$currency.showToast(res1.data.message, 'none', 1500)
                  }
                })
              }
            })
          }
        })
      },
      async getUserInfo(){
        var userToken=wx.getStorageSync('userToken')
        let res=await this.$request.getData('/ucenter/getUserInfo',{user_token:userToken})
        // if (res.data.data.phone==''){
        //   wx.login({
        //     success: res => {
        //       // 获取code
        //       this.code = res.code;
        //     }
        //   })
        // }
        this.userInfo=res.data.data
      },
      toOrder(id){
        this.$currency.navigateTo('/pages/order/main?status='+id)
      },
      async getCartList(){
        let userToken=wx.getStorageSync('userToken');
        let res=await this.$request.getData('/goods/getShopCart',{user_token:userToken});
        if(res.data.level=='success'){
          this.cartListNum=res.data.data.length;
        }
      },
      async getOrderList(status){
        var userToken=wx.getStorageSync('userToken')
        let res=await this.$request.getData('/order/getUserAllOrders',{user_token:userToken,status:'',page:0,limit:5})
        if(res.data.level=='success'){
          this.orderList=res.data
        }
      },

    },

    onShow(){
      this.getUserInfo()
      // this.getCartList()
      this.getOrderList()
      // wx.hideTabBar();
    }
  }
</script>

<style scoped>
  .me{
    width:100%;
    height:100%;
    background:#eee;
  }

  /* 头部 */
  header{
    width:calc(100vw - 60rpx);
    height:120px;
    background:url(http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bifang/me-bg.png);
    background-size: cover;
    padding: 0 30rpx;
  }
  .header_content{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    color:#fff;
    height: 120px;
  }
  .header_content>img{
    width:60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 10px;
  }
  .nick_name{
    width: calc(100% - 70px);
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .nick_name>.name{
    font-size: 16px;
    padding: 10px 0;
  }
  .nick_name>.phone-btn{
    border: 0;
    margin: 0;
    padding: 0;
    height: auto;
    font-size: 14px;
    line-height: 14px;
    background: none;
    color: #09BB07;
  }

  .login_btn{
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    color: #ffffff;
  }
  .login_btn::after,.nick_name>.phone-btn::after{
    border: none;
  }
  .credit{
    font-size: 14px;
    display: flex;
    margin-right: 20px;
    align-content: center;
    flex-wrap: wrap;
    color:#fff;
  }
  .credit>div{
    width:100%;
    padding:10px 0;
  }
  .credit>div span{
    font-size: 20px;
  }

  /* 中间菜单栏 */
  .menu{
    background:#fff;
    width:100%;
    display: flex;
    height: 100px;

  }
  .menu_item{
    font-size: 12px;
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .menu_item>img{
    width:35px;
    height:35px;
  }

  /* 列表栏 */

  .list{
    width:100%;
    margin-top:15px;
  }
  .list_item ,navigator{
    width:100%;
    height:50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#fff;
    border-bottom:1px solid #eee;
  }
  .list_item>button{
    width:100%;
    height:50px;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
    background:#fff;
    padding: 0;
  }
  .list_item>button::after{
    border: none;
  }
  .list_item>span:nth-child(1){
    margin-left: 15px;
  }
  navigator>span:nth-child(1){
    margin-left: 15px;
  }
  button>span:nth-child(1){
    margin-left: 15px;
  }
  .list_item_arrow{
    display: flex;
    flex:1;
    justify-content: flex-end;
    margin-right:10px;
  }
  .list_item_arrow>img{
    width:20px;
    height:20px;
  }

  .cartIcon_wrapper{
    position: relative;
  }
  .cartIcon{
    font-size: 10px;
    position: absolute;
    background:red;
    left:50px;
    width:15px;
    height: 15px;
    line-height: 15px;
    color:#fff;
    text-align: center;
    border-radius: 50%;
    top:5px;
  }
  .cartIcon1{
    font-size: 10px;
    position: absolute;
    background:red;
    left:50px;
    width:15px;
    height: 15px;
    line-height: 15px;
    color:#fff;
    text-align: center;
    border-radius: 50%;
    top:15px;
  }

  .mode{
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    width: 100vw;
    min-height: 100vh;
  }
</style>
